﻿<!DOCTYPE>

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE;IE=11;IE=8,chrome=1" />
    <title>电子签名</title>
    <link href="/InSiteWebApplication/Content/Easyui/themes/metro/easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/custom-easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/themes/icon.css" rel="stylesheet" />
   <style>
    *{        
        user-select:none;}
   </style>
</head>
<body>
 <div class="panelSection">    
        <div class="easyui-panel " title="签名区域" style="padding:3px;width: 100%" 
        data-options="closable:false,collapsible:true,minimizable:false,maximizable:false"> 
                <div id="dvSignature" style="max-width:1000px" class="js-signature" data-outwidth="300" data-width="200" data-height="200" data-border="1px solid black" data-line-color="#bc0000" data-auto-fit="true"></div>
			    <p><button id="clearBtn" class="easyui-linkbutton" >Clear Canvas</button>&nbsp;<button id="saveBtn" class="easyui-linkbutton" data-options="disabled:true" >Save Signature</button></p>
			    <button id="btnTest" class="easyui-linkbutton" >读取图片</button>
                <div id="signature">
				    <p><em></em></p>
			    </div>
        </div> 

 </div> 
</body>
</html>

<script src="/InSiteWebApplication/Scripts/json2.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/jq-signature.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/CustomPageJs/CustomCommon.js" type="text/javascript"></script>
<script type="text/javascript">
    var page = {
        rootPath: getRootPath(), //网站根路径
        ajaxUrl: getRootPath() + "/Ashx/TestHandler.ashx",
        //初始化页面
        init: function () {
            if ($('#dvSignature').length) {
                $('#dvSignature').jqSignature(); //{outImgWidth:500,width:200}
            }
            page.bind();
            $("#saveBtn").linkbutton('disable');//按钮初始化禁止
        },
        //页面事件绑定
        bind: function () {
            //更改事件
            $('#dvSignature').on('jq.signature.changed', function () {
                $('#saveBtn').linkbutton('enable');
            });
            //清除按钮
            $('#clearBtn').on("click", function () {
                page.clearCanvas();
            });
            //保存图片按钮
            $('#saveBtn').on("click", function () {
                page.saveSignature();
            });
            //测试
            $('#btnTest').on("click", function () {
                page.test();
            });
        },
        //清除方法，重要！！！
        reset: function (iscondition, isresult) {
            clearMessage();

        },
        //清除画布      
        clearCanvas: function () {
            //$('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
            $('#dvSignature').jqSignature('clearCanvas');
            $('#saveBtn').linkbutton('disable');
        },
        //保存图片
        saveSignature: function () {
            $('#signature').empty();
            var dataUrl = $('#dvSignature').jqSignature('getDataURL');
            var img = $('<img width=200 height=50>').attr('src', dataUrl);
            $('#signature').append($('<p>').text("签名图片:"));
            $('#signature').append(img);

            $('#signature').append($('<img>').attr('src', $('#dvSignature').jqSignature('getDataURL')));

            $('#signature').append($('<img>').attr('src', $('#dvSignature').jqSignature('getCanvas').toDataURL("image/jpeg", 0.2)));

            return;

            var canvas = $('#dvSignature').jqSignature('getCanvas');
            var base64Img = canvas.toDataURL("image/jpeg", 0.2);

            $.ajax({
                type: "Post",
                url: page.ajaxUrl,
                data: { action: "saveImgBase64", name: new Date().getTime(), base64Img: base64Img },
                cashe: false,
                async: true,
                beforeSend: function () {

                },
                success: function (data) {
                    var r = JSON.parse(data);
                    displayMessage(r.Message, r.Result);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        },
        test: function () {
            $.ajax({
                type: "Post",
                url: page.ajaxUrl,
                data: { action: "getImgBase64", name: "1645192589731" },
                cashe: false,
                async: true,
                beforeSend: function () {

                },
                success: function (data) {
                    var r = JSON.parse(data);
                    if (r.Result == false) {
                        displayMessage(r.Message, r.Result);
                        return;
                    }
                    $('#signature').append($('<img width=200 height=50>').attr('src', r.ReturnData[0].STRIMG));
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        }
    }
    $(function () {
        page.init();
    });

    


   
	</script>